<template>
    <div class="add-card">
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="添加银行卡"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <div class="add-tips">
            <img
                class="warn-icon"
                src="@/assets/images/home/warn-icon.png"
            />
            <div class="add-tips-info">请填写您的真实信息</div>
        </div>

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div class="card-input-box">
                <div class="card-input-item">
                    <div class="item-name">您的姓名</div>
                    <input
                        class="item-input"
                        type="text"
                        placeholder="请输入您的真实姓名"
                        v-model="userName"
                    />
                </div>
                <div class="card-input-item">
                    <div class="item-name">银行卡号</div>
                    <input
                        class="item-input"
                        type="num"
                        placeholder="请输入银行卡号"
                        v-model="cardNum"
                    />
                </div>
                <div class="card-input-item">
                    <div class="item-name">银行名称</div>
                    <input
                        class="item-input"
                        type="text"
                        placeholder="请填写开银行名称"
                        v-model="bankName"
                    />
                </div>
                <div class="card-input-item">
                    <div class="item-name">开户行</div>
                    <input
                        class="item-input"
                        type="text"
                        placeholder="请填写开户行全称"
                        v-model="bankBranchName"
                    />
                </div>
                <div class="card-input-item">
                    <div class="item-name">手机号码</div>
                    <input
                        class="item-input"
                        type="tel"
                        v-model="userPhone"
                        readonly
                    />
                </div>
                <div class="card-input-item">
                    <div class="item-name">验证码</div>
                    <input
                        class="item-input"
                        type="text"
                        placeholder="请输入验证码"
                        v-model="codeNum"
                    />
                    <div
                        class="get-yzm-btn"
                        v-html="getCodeTips"
                        :class="isGetCode == true?'is-get-code': ''"
                        @click="getCode"
                    ></div>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->

        <div
            class="submit-btn"
            @click="sureAdd"
        >提交</div>
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'AddCard',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.91rem',
                left: '0',
                right: '0',
                bottom: '1.33rem',
                background: '#fff'
            },
            userName: '',
            userPhone: '',
            cardNum: '',
            bankName: '',
            bankBranchName: '',
            codeNum: '',
            isGetCode: false,
            getCodeTips: '获取验证码'
        }
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.userPhone = JSON.parse(
                sessionStorage.getItem('userInfo')
            ).mobile_phone
        },
        getCode() {
            if (this.isGetCode) {
                return
            }
            this.isGetCode = true
            let time = 59
            this.getCodeTips = '60秒后重新获取'
            let waitTime = window.setInterval(() => {
                if (time > 0) {
                    this.getCodeTips = time + '秒后重新获取'
                    time--
                } else {
                    this.isGetCode = false
                    this.getCodeTips = '获取验证码'
                    window.clearInterval(waitTime)
                }
            }, 1000)
            this.axios.post('/api/user/bank/code.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.commonDialog.alert('提示', '验证码发送成功')
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        sureAdd() {
            if (this.userName == '') {
                this.commonDialog.alert('提示', '请输入您的真实姓名！')
                return
            }
            if (this.cardNum == '') {
                this.commonDialog.alert('提示', '请输入您的银行卡号！')
                return
            }
            if (this.bankName == '') {
                this.commonDialog.alert('提示', '请输入您的银行名称！')
                return
            }
            if (this.bankBranchName == '') {
                this.commonDialog.alert('提示', '请输入您的开户行全称！')
                return
            }
            if (this.codeNum == '') {
                this.commonDialog.alert('提示', '请输入手机验证码！')
                return
            }
            let postData = this.qs.stringify({
                code: this.codeNum,
                real_name: this.userName,
                bank_name: this.bankName,
                bank_branch: this.bankBranchName,
                bank_card: this.cardNum
            })
            this.axios.post('/api/user/bank/bind.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    const that = this
                    this.commonDialog.alert(
                        '提示',
                        '银行卡添加成功！',
                        function() {
                            that.$router.back(-1)
                        }
                    )
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.add-tips
    display flex
    align-items center
    height 0.8rem
    padding 0 0.37rem
    .warn-icon
        width 0.4rem
        height 0.4rem
    .add-tips-info
        flex 1
        margin-left 0.37rem
        font-size 0.32rem
        color #666
.card-input-box
    padding-left 0.37rem
    .card-input-item
        display flex
        align-items center
        height 1.09rem
        padding-right 0.37rem
        border-bottom 1px solid #e5e5e5
        .item-name
            width 1.86rem
            font-size 0.32rem
            color #666
        .item-input
            flex 1
            min-width 1px
            font-size 0.32rem
            color #333
            border none
            outline none
        .get-yzm-btn
            line-height 0.8rem
            padding 0 0.27rem
            background #d7463c
            font-size 0.32rem
            color #fff
            border-radius 3px
        .is-get-code
            background #dcdcdc
.submit-btn
    position absolute
    bottom 0
    left 0
    right 0
    height 1.33rem
    line-height 1.33rem
    text-align center
    background #d7463c
    font-size 0.37rem
    color #fff
input::-webkit-input-placeholder
    color #ccc
</style>
